<template>
  <div class="markets">
    <div class="title">{{ $t('robot') }}</div>
    <van-tabs v-model="active"
              swipeable
              animated
              sticky>
      <van-tab v-for="item in platform"
               :key="item.name">
        <template #title>{{ $t(item.label) }}</template>
        <van-pull-refresh v-model="isLoading"
                          @refresh="loadData">
          <ul>
            <template v-if="robot_list[item.label] && robot_list[item.label].length > 0">
              <li v-for="(item,index) in robot_list[item.label]"
                  :key="item.id"
                  @click="goDetail(item)">
                <div class="currencyName">
                  <div class="name">{{ item.stock}}<span>/{{ item.money}}</span></div>
                  <div class="label">{{item.recycle_status?$t('cycle_strategy'):$t('single_strategy')}}</div>
                </div>
                <div class="currencyInfo">
                  <div class="profit">{{$t('expectedRevenue')}}：{{item.rate < 0 ? '' : '+'}}{{ Number(item.revenue) | numberFormat(3) }} {{ item.money }}</div>
                  <div class="currencyNumber">{{$t('currencyQuantity')}}：{{ getDeal(item.values_str) }} {{ item.stock }}</div>
                </div>
              </li>
            </template>
            <van-empty v-else
                       :description="$t('empty.run_robot')" />
          </ul>
        </van-pull-refresh>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex'
export default {
  i18n: {
    messages: {
      zh: {
        expectedRevenue: '预计收益',
        currencyQuantity: '持币数量',
      },
      en: {
        expectedRevenue: 'Expected revenue',
        currencyQuantity: 'Currency quantity'
      },
      jp: {
        expectedRevenue: '推定収入',
        currencyQuantity: '保有数',
      },
      kr: {
        expectedRevenue: '예상 수입',
        currencyQuantity: '보유 수',
      }
    }
  },
  data () {
    return {
      active: 0,
      isLoading: false,
      robot_list: {}
    }
  },
  computed: {
    ...mapState({
      platform: ({ robot }) => robot.platform,
      robots: ({ robot }) => robot.robotList
    })
  },
  watch: {
    robots (values) {
      const list = values.filter(item => item.status === 1)
      this.platform.forEach((item) => {
        this.robot_list[item.label] = []
        for (const i in list) {
          if (list[i].platform === item.label) {
            this.robot_list[item.label].push(list[i])
          }
        }
      })
      console.log(this.robot_list)
      this.$forceUpdate()
    }
  },
  mounted () {
    this.loadData()
  },
  methods: {
    ...mapActions({
      robotList: 'robot/robotList'
    }),
    loadData () {
      this.robotList().then(() => {
        this.isLoading = false
      })
    },
    goDetail (item) {
      this.$nextTick(() => {

        if (item.type == 2) {
          this.$router.push({
            name: 'robot-tract',
            query: { market_id: item.market_id }
          })
        } else {
          this.$router.push({
            name: 'robot',
            query: { market_id: item.market_id }
          })
        }

      })
    },
    getDeal (values) {
      if (values) {
        const valueJson = JSON.parse(values)
        return Number(valueJson.deal_amount).toFixed(3) || '-'
      }
      return '-'
    }
  }
}
</script>

<style scoped lang="less">
.markets{
  margin-top: 20px;
  .title {
    height: 28px;
    font-size: 20px;
    font-weight: 500; 
    color: #000000;
  }
  /deep/.van-tabs__wrap{
    height: 33px;
    .van-tabs__nav{
      background: transparent;
      padding-bottom: 0;
      .van-tab{
        .van-tab__text{
          font-size: 15px;
          font-weight: 500;
          color: #999999;
          line-height: 21px;
        }
        &.van-tab--active{
          .van-tab__text{
            color: #366FF9;
          }
        }
      }
      .van-tabs__line{
        bottom: 0;
        width: 30px;
        height: 3px;
        background: #366FF9;
        border-radius: 2px;
      }
    }
  }
  .van-pull-refresh{
    background: #FFFFFF;
    border-radius: 12px;
    overflow: hidden;
    ul{
      padding: 8px 0 20px 0;
      li{
        padding: 12px 16px 15px 16px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1px solid #EBEBEB;
        .currencyName{
          .name{
            font-size: 16px;
            font-weight: 400;
            color: #000000;
            span{
              margin-left: 5px;
              font-size: 13px;
              font-weight: 400;
              color: #3871F9;
            }
          }
          .label{
            margin-top: 5px;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 64px;
            height: 18px;
            font-size: 11px;
            color: #ffffff;
            font-weight: 400;
            background: linear-gradient(90deg, #366FF9 0%, #6D97FA 100%);
            border-radius: 9px;
          } 
        }
        .currencyInfo{
          font-size: 13px;
          font-weight: 400;
          color: #727383;
          line-height: 18px;
          .currencyNumber{
            margin-top: 3px;
          }
        }
      }
    }
  }
}

</style>
